<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap for GitHub style</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-github.css" rel="stylesheet">
    <link href="theme.css" rel="stylesheet">
  </head>
  <body role="document">
  
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">GitHub style</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container theme-showcase" role="main">
    
      <div class="jumbotron">
        <h1>基本介绍</h1>
        <p>GitHub Style是基于Bootstrap v3.20 的Github主题样式，其风格借鉴了Github并衍生了bootstrap思想。本页面是演示效果。除了本页面特有的组件，具体代码请参阅<a href="http://v3.bootcss.com/components/" target="_blank">http://v3.bootcss.com/components/</a></p>
        <p><a href="#" class="btn btn-primary btn-lg" role="button">更多介绍 &raquo;</a></p>
      </div>
      
      <div class="page-header">
        <h1>按钮</h1>
      </div>
      <p>
        <button type="button" class="btn btn-lg btn-default">默认</button>
        <button type="button" class="btn btn-lg btn-primary">主要</button>
        <button type="button" class="btn btn-lg btn-success">成功</button>
        <button type="button" class="btn btn-lg btn-info">信息</button>
        <button type="button" class="btn btn-lg btn-warning">警告</button>
        <button type="button" class="btn btn-lg btn-danger">危险</button>
        <button type="button" class="btn btn-lg btn-link">链接</button>
      </p>
      <p>
        <button type="button" class="btn btn-default">默认</button>
        <button type="button" class="btn btn-primary">主要</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-link">链接</button>
      </p>
      <p>
        <button type="button" class="btn btn-sm btn-default">默认</button>
        <button type="button" class="btn btn-sm btn-primary">主要</button>
        <button type="button" class="btn btn-sm btn-success">成功</button>
        <button type="button" class="btn btn-sm btn-info">信息</button>
        <button type="button" class="btn btn-sm btn-warning">警告</button>
        <button type="button" class="btn btn-sm btn-danger">危险</button>
        <button type="button" class="btn btn-sm btn-link">链接</button>
      </p>
      <p>
        <button type="button" class="btn btn-xs btn-default">默认</button>
        <button type="button" class="btn btn-xs btn-primary">主要</button>
        <button type="button" class="btn btn-xs btn-success">成功</button>
        <button type="button" class="btn btn-xs btn-info">信息</button>
        <button type="button" class="btn btn-xs btn-warning">警告</button>
        <button type="button" class="btn btn-xs btn-danger">危险</button>
        <button type="button" class="btn btn-xs btn-link">链接</button>
      </p>
      <p>
        <button type="button" class="btn btn-default" disabled="disabled">默认</button>
        <button type="button" class="btn btn-primary" disabled="disabled">主要</button>
        <button type="button" class="btn btn-success" disabled="disabled">成功</button>
        <button type="button" class="btn btn-info" disabled="disabled">信息</button>
        <button type="button" class="btn btn-warning" disabled="disabled">警告</button>
        <button type="button" class="btn btn-danger" disabled="disabled">危险</button>
        <button type="button" class="btn btn-link" disabled="disabled">链接</button>
      </p>
      
      <p>
      	<div class="btn-group">
		  <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-chevron-left"></span></button>
		  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-chevron-right"></span></button>
		  <div class="btn-group">
		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		      菜单
		      <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu" role="menu">
		      <li><a href="#">列表一</a></li>
		      <li><a href="#">列表二</a></li>
		    </ul>
		  </div>
		</div>
      </p>
      
      <div class="page-header">
        <h1>文本框</h1>
      </div>
      <p>
      	<input type="text" class="form-control" placeholder="请输入">
      </p>
      <p>
      	<div class="input-group">
		  <span class="input-group-addon">@</span>
		  <input type="text" class="form-control" placeholder="用户名">
		</div>
      </p>
      <p>
        <div class="form-group">
		  <label for="exampleInputEmail1">邮箱地址</label>
		  <input type="email" class="form-control" placeholder="请输入邮箱">
		</div>
      </p>
      
      <div class="page-header">
        <h1>表格</h1>
      </div>

      <div class="row">
        <div class="col-md-6">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="page-header">
        <h1>标题描述</h1>
      </div>
      <p>
        <h3 class="conversation-list-heading">
		  <div class="inner">
		    <span class="glyphicon glyphicon-star"></span>
		    <span class="text-emphasized">42</span> stars
		  </div>
		</h3>
      </p>
      <p>参考代码：
		<pre>
&lt;h3 class="conversation-list-heading"&gt;
  &lt;div class="inner"&gt;
    &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
    &lt;span class="text-emphasized"&gt;42&lt;/span&gt; stars
  &lt;/div&gt;
&lt;/h3&gt;
</pre>
      </p>
      <div class="page-header">
        <h1>标签</h1>
      </div>
      <h3>
        <span class="label label-default">默认</span>
        <span class="label label-primary">主要</span>
        <span class="label label-success">成功</span>
        <span class="label label-info">信息</span>
        <span class="label label-warning">警告</span>
        <span class="label label-danger">危险</span>
      </h3>
      <p>
        <span class="label label-default">默认</span>
        <span class="label label-primary">主要</span>
        <span class="label label-success">成功</span>
        <span class="label label-info">信息</span>
        <span class="label label-warning">警告</span>
        <span class="label label-danger">危险</span>
      </p>



      <div class="page-header">
        <h1>徽章</h1>
      </div>
      <ul class="nav nav-pills">
        <li class="active"><a href="#">主页 <span class="badge">42</span></a></li>
        <li><a href="#">详细</a></li>
        <li><a href="#">消息 <span class="badge">3</span></a></li>
      </ul>


      <div class="page-header">
        <h1>下拉菜单</h1>
      </div>
      <div class="dropdown theme-dropdown clearfix">
        <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
      </div>



      <div class="page-header">
        <h1>导航</h1>
      </div>
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>

      <div class="page-header">
        <h1>分页</h1>
      </div>
      <p>
        <div>
	      <ul class="pagination">
	        <li><a href="#">«</a></li>
	        <li class="active"><a href="#">1</a></li>
	        <li><a href="#">2</a></li>
	        <li><a href="#">3</a></li>
	        <li><a href="#">4</a></li>
	        <li><a href="#">5</a></li>
	        <li><a href="#">»</a></li>
	      </ul>
	    </div>
      </p>

      <div class="page-header">
        <h1>导航条</h1>
      </div>

      <div class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
	          <div class="form-group">
	            <input class="form-control" type="text" placeholder="Search">
	          </div>
	          <button class="btn btn-default" type="submit">Submit</button>
	        </form>
          </div>
        </div>
      </div>

      <div class="navbar navbar-inverse">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="page-header">
        <h1>菜单</h1>
      </div>
      <p>
	    <ul class="menu">
	      <li><a>0. 概览</a></li>
	      <li><a>1. 列表一</a></li>
	      <li><a>2. 列表二</a></li>
	      <li><a class="selected">3. 列表三</a></li>
	      <li><a>4. 列表四</a></li>
	      <li><a>5. 列表五</a></li>
	    </ul>
      </p>
      <p>
      参考代码：<pre>
&lt;ul class="menu"&gt;
  &lt;li&gt;&lt;a&gt;0. 概览&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;1. 列表一&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;2. 列表二&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="selected"&gt;3. 列表三&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;4. 列表四&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;5. 列表五&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
      </p>

      <div class="page-header">
        <h1>弹出框</h1>
      </div>
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
      <div class="alert alert-info" role="alert">
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
      </div>
      <div class="alert alert-warning" role="alert">
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
      </div>
      <div class="alert alert-danger" role="alert">
        <strong>Oh snap!</strong> Change a few things up and try submitting again.
      </div>



      <div class="page-header">
        <h1>进度条</h1>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">100% Complete</span></div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
        <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
        <div class="progress-bar progress-bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
      </div>



      <div class="page-header">
        <h1>列表组</h1>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <div class="list-group">
            <a href="#" class="list-group-item active">
              Cras justo odio
            </a>
            <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item">Morbi leo risus</a>
            <a href="#" class="list-group-item">Porta ac consectetur ac</a>
            <a href="#" class="list-group-item">Vestibulum at eros</a>
          </div>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <div class="list-group">
            <a href="#" class="list-group-item active">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
          </div>
        </div><!-- /.col-sm-4 -->
      </div>



      <div class="page-header">
        <h1>面板</h1>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">标题</h3>
            </div>
            <div class="panel-body">
              内容
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">标题</h3>
            </div>
            <div class="panel-body">
              内容
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-success">
            <div class="panel-heading">
              <h3 class="panel-title">标题</h3>
            </div>
            <div class="panel-body">
              内容
            </div>
          </div>
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">标题</h3>
            </div>
            <div class="panel-body">
              内容
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-warning">
            <div class="panel-heading">
              <h3 class="panel-title">标题</h3>
            </div>
            <div class="panel-body">
              内容
            </div>
          </div>
          <div class="panel panel-danger">
            <div class="panel-heading">
              <h3 class="panel-title">标题</h3>
            </div>
            <div class="panel-body">
              内容
            </div>
          </div>
        </div>
      </div>
      
      <p>
        <div class="panel panel-default">
	      <div class="panel-heading">特色新闻</div>
	      <div class="panel-body">
	        <p>歌曲《小苹果》作为“筷子兄弟”（肖央、王太利）、屈菁菁主演的电影《老男孩之猛龙过江》的宣传曲，由王太利作词作曲，2014年5月3日发布。</p>
	      </div>
	      <ul class="list-group">
	        <li class="list-group-item">列表一</li>
	        <li class="list-group-item">列表二</li>
	        <li class="list-group-item">列表三</li>
	        <li class="list-group-item">列表四</li>
	        <li class="list-group-item">列表五</li>
	      </ul>
	    </div>
      </p>


      <div class="page-header">
        <h1>Wells</h1>
      </div>
      <div class="well">
        <p>2014年9月19日晚，阿里巴巴正式在纽交所挂牌交易，股票代码BABA，价格确定为每股68美元， 其股票当天开盘价为92．7美元，较发行价大涨36．32% 。由于阿里巴巴集团的承销商行使了超额配售选择权，从而将筹资规模扩大了15%，从而使阿里在交易中总共筹集到了250亿美元资金，创下了有史以来规模最大的一桩IPO交易。</p>
      </div>
      
      <div class="page-header">
        <h1>如何使用</h1>
      </div>
      <p>
      <pre>
&lt;!-- Bootstrap 核心 CSS 文件 --&gt;
&lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;

&lt;!-- GitHub Style主题文件 --&gt;
&lt;link rel="stylesheet" href="css/bootstrap-github.css"&gt;

&lt;!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&gt;
&lt;script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- Bootstrap 核心 JavaScript 文件 --&gt;
&lt;script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
</pre>
      </p>

    </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
